Strutturazione dei file: multi sketch

Se si ha la necessità di raccogliere più sketch (per progetti complessi o per fare più prove) si può evitare di moltiplicare alcuni file usando una struttura simile a quella con un singolo sketch ma con una sottocartella per ogni codice:

NOME-CARTELLA-PRINCIPALE
- assets
  - BITMAP.png
  - AUDIO.mp3
- libs
  - p5.dom.min.js
  - p5.min.js
  - p5.sound.min.js
- NOME-SKETCH-1
  - index.html
  - sketch.js
- NOME-SKETCH-2
- NOME-SKETCH-3

index.html

I riferimenti alle librerie dovranno essere preceduti dai caratteri "../" (cartella genitrice) e dal nome della cartella "libs":

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
        <style> body {padding: 0; margin: 0; overflow: hidden;} </style>
        <script src="../libs/p5.min.js"></script>
        <script src="../libs/p5.dom.min.js"></script>
        <script src="../libs/p5.sound.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body>
    </body>
</html>

sketch.js

I riferimenti ai file esterni dovranno essere preceduti dai caratteri "../" e dal nome della cartella "assets", ad esempio:

...                            
function preload() {
    img = loadImage( "../assets/BITMAP.png" );  
}
...